---
section: Customization
title: Composing Utilities
slug: /docs/composing-utilities/
order: 3
---

# Composing Utilities

Create your own subset of utilities.

<carbon-ad />

By default the `x` namespace exposed in xstyled has all utilities built-in. Sometime you may want to reduce your bundle size by choosing only utilities you need.

## Create a new namespace

You can't modify the `x` namespace but you can easily create your own namespace using `createX`. It allows you to create a namespace from an utility:

```js
import { createX, fontSize } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(fontSize)

// Only "fontSize" is usable
<x.div fontSize="10px" />
```

## Compose utilities

Compose utilities using `compose` method.

```js
import { createX, compose, fontSize, fontWeight } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(compose(fontSize, fontWeight))

// "fontSize" and "fontWeight" are usable
<x.div fontSize="10px" fontWeight="bold" />
```

## Utility groups

To make it easier, utilities are organized in groups, for example `typography` groups all utilities relative to text edition:

```js
import { createX, typography } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(typography)

// "fontSize", "fontWeight" and all typography utilities are available
<x.div fontSize="10px" fontWeight="bold" />
```

**Available groups**

| Group           | Utilities                                                                                                                                                                                                                                                  |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `animations`    | `animation`                                                                                                                                                                                                                                                |
| `backgrounds`   | `background`,`backgroundColor`,`backgroundImage`,`backgroundSize`,`backgroundPosition`,`backgroundRepeat`,`backgroundAttachment`,`backgroundClip`,`gradientFrom`,`gradientVia`,`gradientTo`                                                                |
| `borders`       | `border`, `borderColor`, `borderWidth`, `borderStyle`, `outline`, `outlineColor`, `outlineWidth`, `outlineStyle`, `borderRadius`, `divideY`, `divideX`, `divideXReverse`, `divideYReverse`, `divideColor`, `divideStyle`, `ring`, `ringInset`, `ringColor` |
| `effects`       | `opacity`, `boxShadow`, `textShadow`                                                                                                                                                                                                                       |
| `flexboxes`     | `alignItems`, `alignContent`, `justifyContent`, `justifyItems`, `flexWrap`, `flexGrow`, `flexShrink`, `flexBasis`, `flexDirection`, `flex`, `justifySelf`, `alignSelf`, `order`                                                                            |
| `flexboxGrids`  | `row`, `col`                                                                                                                                                                                                                                               |
| `grids`         | `gap`, `columnGap`, `rowGap`, `gridColumn`, `gridRow`, `gridAutoFlow`, `gridAutoColumns`, `gridAutoRows`, `gridTemplateColumns`, `gridTemplateRows`, `gridTemplateAreas`, `gridArea`                                                                       |
| `interactivity` | `appearance`, `cursor`, `pointerEvents`, `resize`, `userSelect`                                                                                                                                                                                            |
| `layout`        | `display`, `boxSizing`, `container`, `overflow`, `overflowX`, `overflowY`, `zIndex`, `position`, `top`, `right`, `bottom`, `left`, `visibility`, `overscrollBehavior`, `objectFit`                                                                         |
| `sizing`        | `width`, `height`, `maxWidth`, `maxHeight`, `minWidth`, `minHeight`                                                                                                                                                                                        |
| `space`         | `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `mx`, `my`, `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `px`, `py`, `spaceY`, `spaceX`, `spaceXReverse`, `spaceYReverse`                                  |
| `svg`           | `fill`, `stroke`                                                                                                                                                                                                                                           |
| `tables`        | `borderCollapse`, `tableLayout`                                                                                                                                                                                                                            |
| `transforms`    | `transform`, `transformOrigin`, `translateX`, `translateY`, `rotate`, `skewX`, `skewY`, `scale`, `scaleX`, `scaleY`                                                                                                                                        |
| `transitions`   | `transition`, `transitionProperty`, `transitionDuration`, `transitionTimingFunction`, `transitionDelay`                                                                                                                                                    |
| `typography`    | `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `fontStyle`, `letterSpacing`, `color`, `textTransform`, `textDecoration`, `textAlign`, `verticalAlign`, `whiteSpace`, `textOverflow`, `listStyleType`, `listStylePosition`                           |
